<template>
  <div
    :style="{
      border: '1px solid #dfdfdf',
      padding: '20px',
      margin: '20px auto 0',
      borderRadius: '16px',
      background: '#fff',
      width: '1200px',
      position: 'relative',
    }"
  >
    <div
      class="section-title"
      :style="{
        margin: '0px 0',
        color: '#2087c3',
        borderRadius: '8px 8px 0 0',
        textAlign: 'center',
        background:
          'url(http://codegen.caihongy.cn/20221029/f414ce6eeb09429c9bc4d3d6643d9bd1.png) no-repeat center top',
        fontSize: '24px',
        lineHeight: '150px',
        fontWeight: 'bold',
      }"
    >
      公告信息
    </div>
    <div class="section-content">
      <div class="content-title">{{ detail.title }}</div>
      <div class="content-sub-title">发布时间：{{ detail.addtime }}</div>
      <el-divider></el-divider>
      <div class="content-detail" v-html="detail.content"></div>
    </div>
  </div>
</template>

<script>
export default {
  //数据集合
  data() {
    return {
      detail: {},
    };
  },
  created() {
    this.detail = Object.assign({}, JSON.parse(this.$route.query.detailObj));
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.section {
  width: 900px;
  margin: 0 auto;
}

.section-content {
  margin-top: 30px;
}
.content-title {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
.content-sub-title {
  text-align: center;
  margin-top: 20px;
  color: #888888;
  font-size: 14px;
}
</style>
